<template>
	<view class="content">
		<view @tap="toDetail(item)" class="listItem" v-for="(item, itemIndex) in listData" :key="itemIndex">
			<view class="itemTitle">
				<view style="display: flex;">
					<image style="width: 40upx;height: 40upx;" src="../../static/product/itemheader.png" mode="scaleToFill"></image>
					<text style="font-size: $uni-font-size-sm;color: #433302;margin-left: 20upx;">{{item.name}}</text>
				</view>
				<view style="display: flex;flex-direction: column;justify-content: center;">
					<!-- <text style="font-size: 18upx;color: #656565;">是否有效</text> -->
					<text style="font-size: 18upx;color: #656565;">{{item.valid==1?'有效':'无效'}}</text>
				</view>
			</view>
			<view style="width: 100%;height: 4upx;background-color: #dddddd;margin-top: 30upx;"></view>
			
			<view style="display: flex;justify-content: flex-start;align-items: center;margin-top: 40upx;">
				<text style="font-size: 30upx;color: #656565;width: 40%;">总金额</text>
				<text style="font-size: 30upx;color: #656565;width: 60%;">1000CN</text>
			</view>
			<view style="display: flex;align-items: center;margin-top: 40upx;">
				<text style="font-size: 30upx;color: #656565;width: 40%;">IPFS总存力</text>
				<text style="font-size: 30upx;color: #656565;width: 60%;">{{item.nhl}}%</text>
			</view>
			<view style="display: flex;align-items: center;margin-top: 20upx;">
				<text style="font-size: 30upx;color: #656565;width: 40%;">封存进度</text>
				<text style="font-size: 30upx;color: #656565;width: 60%;">100%</text>
			</view>
			<view style="display: flex;align-items: center;margin-top: 20upx;">
				<text style="font-size: 30upx;color: #656565;width: 40%;">下单时间</text>
				<text style="font-size: 30upx;color: #656565;width: 60%;">2012-12-45</text>
			</view>
			<view style="display: flex;align-items: center;margin-top: 20upx;">
				<text style="font-size: 30upx;color: #656565;width: 40%;">预计交付</text>
				<text style="font-size: 30upx;color: #656565;width: 60%;">24时</text>
			</view>
			<view style="display: flex;align-items: center;margin-top: 20upx;">
				<text style="font-size: 30upx;color: #656565;width: 40%;">合约到期</text>
				<text style="font-size: 30upx;color: #FB9C28;width: 60%;">2012-12-45</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	
	export default {
		components: {
			
		},
		data() {
			return {
				listData:[1,2]
			}
		},
		onLoad() {
	
		},
		onShow(){
			var that=this;
		},
		methods: {
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		// align-items: center;
		background-color: #F2F2F2;
		bottom: 0;
		position: fixed;
		width: 100%;
		height: 100%;
	}
	.bannerBG {
		width: 92%;
		height: 120upx;
		background-color: #12B3F9;
		display: flex;
		padding-left: 4%;
		padding-right: 4%;
		align-items: center;
		justify-content: space-between;
		// border-radius:0upx 0upx 30upx 30upx;
		
		.active {
			background-color: #FFD10c;
			color: #433302;
			// width: 20%;
			padding: 20upx;
			text-align: center;
			border-radius: 10upx;
			font-size: $uni-font-size-base;
		}
		
		.inactive {
			background-color: #FFFFFF;
			color: #656565;
			// width: 20%;
			padding: 20upx;
			text-align: center;
			border-radius: 10upx;
			font-size: $uni-font-size-base;
		}
	}
	.listItem {
		display: flex;
		flex-direction: column;
		margin-top: 40upx;
		width: 82%;
		margin-left: 4%;
		margin-right: 4%;
		border-radius: 10upx;
		background-color: #FFFFFF;
		padding: 5%;
		
		.itemTitle {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: space-between;
			align-items: center;
		}
	}
</style>
